<!--
 * @Author: your name
 * @Date: 2021-03-30 17:26:06
 * @LastEditTime: 2021-03-31 19:45:20
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \shop\training-group-5-warehouse\dianshang\src\views\Invitation\components\DirlogTwo.vue
-->
<!-- 邀请好友免费拿二级弹框 -->
<template>
  <div class="dirlogTwo" v-if="isShow">
    <div class="goToPush">
      <span>&lt;</span>
    </div>
    <div class="container">
      <div class="cancel" @click="handleCloseDirlog">X</div>
      <div class="avatar">
        <img :src="avatar" alt />
      </div>
      <div
        class="title"
        style="width: 100%; height: 80px; display: flex; align-items: center; justify-content: center; margin: 20px 0;"
      >
        <span style="font-size: 18px; color: #5f4a23; font-weight: 600;">
          预计在邀请
          <b style="color: #c74643;">1人</b>，直接免费拿
        </span>
      </div>
      <div
        class="addUser"
        style="width: 100%; height: 50px; display: flex; align-items: center; justify-content: center;"
      >
        <span
          style="
          width: 50px; 
          height: 50px; 
          display: flex; 
          align-items: center; 
          justify-content: center; 
          border: dashed 1px #c5a070; 
          border-radius: 50%;
          color: #c5a070;
          margin: 0 10px;
          "
          @click="()=>WeChatShow = true"
        >+</span>
        <span
          style="
          width: 50px; 
          height: 50px; 
          display: flex; 
          align-items: center; 
          justify-content: center; 
          border: dashed 1px #c5a070; 
          border-radius: 50%;
          color: #c5a070;
          margin: 0 10px;
          "
          @click="()=>WeChatShow = true"
        >+</span>
      </div>
      <div
        class="WeChatBtn"
        style="
        width: 100%; 
        height: 50px; 
        display: flex; 
        align-items: center; 
        justify-content: center;
        margin: 60px 0;
        padding: 0 20px;"
      >
        <button
          style="
          width: 100%; 
          height: 50px; 
          font-size: 16px; 
          color: #fff;
          background: -webkit-linear-gradient(#fdb515, #fe8931);
          border: none;
          outline: none;
          border-radius: 10px;"
          @click="()=>WeChatShow=true"
        >去微信邀请好友帮砍</button>
      </div>
    </div>
    <div class="goToWeChat" v-if="WeChatShow">
      <div class="containerWeChat">
        <div class="cloneWeChat">
          <div
            class="cancels"
            @click="()=>WeChatShow = false"
            style="background: #ccc; color: #333;"
          >X</div>
          <div
            style="width: 100%; height: 150px;  display: flex; align-items: center; justify-content: center; margin: 10px 0;"
          >
            <img :src="shibbolethImg" alt style="width: 130px; height: 100px;" />
          </div>
          <div
            style="width: 100%; height: 100px; display: flex;  flex-direction: column; align-items: center; justify-content: center;"
          >
            <p style="margin: 5px 0;">去微信粘贴给好友</p>
            <p>
              好友帮砍后可
              <span style="color: red;">砍大金额</span>
            </p>
          </div>
          <div
            style="width: 100%; height: 150px;  display: flex; align-items: center; justify-content: center;"
          >
            <img
              :src="weChatBtnImg"
              alt
              style="width: 260px; height: 55px;"
              @click="handleClonePushWeChat"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import weChatBtnImg from "../../../assets/img/weChatBtnImg.jpg";
import shibbolethImg from "../../../assets/img/shibbolethImg.jpg";
import { mapMutations } from "vuex";
export default {
  props: {
    isShow: {
      type: Boolean,
      require: true,
      default: true,
    },
    avatar: {
      type: String,
      require: false,
      default:
        "https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3717120934,3932520698&fm=26&gp=0.jpg",
    },
  },
  data() {
    return {
      weChatBtnImg: weChatBtnImg,
      shibbolethImg: shibbolethImg,
      WeChatShow: false,
    };
  },
  methods: {
    ...mapMutations("bargain", ["SET_LOCALHOST"]),
    //关闭弹窗
    handleCloseDirlog() {
      this.$emit("handleCloseDirlog");
    },
    //复制指令去微信页面
    handleClonePushWeChat() {
      this.SET_LOCALHOST("http://localhost:4000/bargain");
      this.$router.push({
        path: "/weChat",
        query: { url: "http://localhost:4000/bargain" },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dirlogTwo {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  .goToPush {
    position: fixed;
    left: 10px;
    top: 5px;
    span {
      color: #ccc;
    }
  }
  .container {
    width: 310px;
    height: 310px;
    background: -webkit-linear-gradient(#fff5e3, #fee9a8);
    border-radius: 20px;
    position: relative;
    .cancel {
      width: 30px;
      height: 30px;
      background: #eed59c;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      right: -15px;
      top: -15px;
      font-size: 20px;
      color: #cbb27b;
      z-index: 999;
    }
    .avatar {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      position: absolute;
      left: 50%;
      top: -30px;
      transform: translateX(-50%);
      border: solid 6px #f5c019;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
  }
  .goToWeChat {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    .containerWeChat {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .cloneWeChat {
        width: 300px;
        height: 300px;
        background: #fff;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        font-size: 16px;
        font-weight: 600;
        border-radius: 20px;
        padding: 0 20px;
      }
    }
    .cancels {
      width: 30px;
      height: 30px;
      background: #eed59c;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      right: -15px;
      top: -15px;
      font-size: 20px;
      color: #cbb27b;
      z-index: 999;
    }
  }
}
</style>